<template>
  <div>
    <div class="title">
      <span>{{ text }}</span>
      <div class="t-btn" v-show="btnshow">
        <div
          :class="item.active ? 'active' : ''"
          class="t-btn-item"
          v-for="(item, index) in btn"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../assets/font/font.css";
export default {
  name: "sTitle",
  props: {
    text: String,
    active: {
      default: 0,
      type: Number,
    },
    btnshow: {
      default: true,
      type: Boolean,
    },
  },
  data() {
    return {
      btn: [
        {
          name: "县直",
          active: false,
        },
        {
          name: "乡镇",
          active: false,
        },
      ],
    };
  },
  mounted() {
    this.btn[this.active].active = true;
  },
};
</script>
<style scoped>
.title {
  width: 90%;
  margin: auto;
  height: 4vh;
  background-image: url("~@/assets/img/global/stitle.png");
  background-repeat: no-repeat;
  background-size: 70% 100%;
  line-height: 4vh;
  padding-left: 30px;
  box-sizing: border-box;
}
.title span {
  color: #c9e3f9;
  font-size: 18px;
  font-style: oblique;
  font-family: "HYLXJT";
}
.t-btn {
  width: 160px;
  height: 3.8vh;
  float: right;
  padding-right: 30px;
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.t-btn-item {
  width: 75px;
  text-align: center;
  background-image: url("~@/assets/img/global/stitlebtn.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.t-btn .active {
  background-image: url("~@/assets/img/global/stitlebtn_active.png");
}
</style>
  